<template>
    <el-form
        ref="loginForm"
        :model="form"
        :rules="rules"
        label-width="0"
        size="large"
        @keyup.enter="login"
    >
        <el-form-item prop="phone">
            <el-input
                v-model="form.phone"
                prefix-icon="el-icon-iphone"
                clearable
                :placeholder="$t('请输入手机号码')"
            >
                <template #prepend>+86</template>
            </el-input>
        </el-form-item>
        <el-form-item prop="yzm" style="margin-bottom: 35px">
            <div class="login-msg-yzm">
                <el-input
                    v-model="form.yzm"
                    prefix-icon="el-icon-unlock"
                    clearable
                    :placeholder="$t('短信验证码')"
                ></el-input>
                <el-button @click="getYzm" :disabled="disabled">
                    {{ $t('获取验证码') }}
                    <span v-if="disabled">({{ countDownNumber }})</span>
                </el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 100%" :loading="isLogin" round @click="login">
                {{ $t('登录') }}
            </el-button>
        </el-form-item>
        <!--<div class="login-reg">-->
        <!--    {{ $t('还没有账号?') }} <router-link to="/userRegister">{{ $t('创建新账号') }}</router-link>-->
        <!--</div>-->
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { type FormInstance, type FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import feedback from '@/utils/feedback.ts'

interface FormData {
    phone: string
    yzm: string
}

const { t } = useI18n()
// 定义响应式数据
const form = reactive<FormData>({
    phone: '',
    yzm: ''
})

const rules = reactive<FormRules<FormData>>({
    phone: [{ required: true, message: t('login.mobileError') }],
    yzm: [{ required: true, message: t('login.smsError') }]
})

const disabled = ref(false)
const countDownNumber = ref(0)
const isLogin = ref(false)
const loginForm = ref<FormInstance>()
// 定义定时器变量并初始化为null
let timer: number | null = null

const getYzm = async () => {
    if (!loginForm.value) return
    // 验证表单
    const validateResult = await loginForm.value.validateField('phone')
    if (!validateResult) {
        return false
    }

    feedback.success(t('login.smsSent'))

    disabled.value = true
    countDownNumber.value = 60
    timer = window.setInterval(() => {
        countDownNumber.value -= 1
        if (countDownNumber.value < 1) {
            if (timer) {
                clearInterval(timer)
            }
            disabled.value = false
            countDownNumber.value = 0
        }
    }, 1000)
}

const login = async () => {
    if (!loginForm.value) return
    // 验证表单
    await loginForm.value.validate((valid) => {
        if (!valid) return
    })
}
</script>

<style></style>
